<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="handleBack">返回</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="handleRemove">移除</el-button>
      <span style="font-size:12px;">该列表显示属于角色【普通职员】下的所有用户</span>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      stripe
      fit
    >
      <el-table-column align="center" type="selection" width="60"/>
      <el-table-column align="center" label="名称" width="200" prop="name"/>
      <el-table-column align="center" label="昵称" width="200" prop="nickname"/>
      <el-table-column align="center" label="来源" width="150" prop="user_type">
        <template slot-scope="scope">
          {{ scope.row.user_type | userTypeFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号码" width="150" prop="mobile"/>
      <el-table-column align="center" label="状态" width="100" prop="service_status_flag">
        <template slot-scope="scope">
          <el-tag :type="scope.row.service_status_flag | statusTagFilter">{{ scope.row.service_status_flag | statusMeaningFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色" width="200" prop="roles">
        <template slot-scope="scope">
          {{ scope.row.roles.join(',') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效期" width="150" prop="expiry_date"/>
      <el-table-column align="center" label="备注" width="300" prop="remark"/>
      <el-table-column label="创建时间" width="250" align="center" prop="insert_tms"/>
      <el-table-column label="最后更新时间" width="250" align="center" prop="update_tms"/>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-show="total>0" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.page_size" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

  </div>
</template>

<script>
import { getList } from '@/api/user'

export default {
  name: 'User',
  filters: {
    statusTagFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger',
        0: 'gray'
      }
      return statusMap[status]
    },
    statusMeaningFilter(status) {
      const statusMap = {
        1: '有效',
        2: '冻结',
        0: '未知'
      }
      return statusMap[status]
    },
    userTypeFilter(type) {
      const map = {
        1: '系统服务用户',
        2: '内部人员',
        3: '客户',
        4: '兼职',
        0: '未知'
      }
      return map[type]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 20,
        name: null,
        user_nickname: null,
        service_status_flag: 1
      },
      total: null,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        view: '查看',
        update: '编辑',
        create: '新增'
      },
      form: {
        id: null,
        name: null,
        nickname: null,
        password: null,
        mobile: null,
        user_type: null,
        expiry_date: null,
        remark: null
      },
      isView: false,
      rules: {
        name: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]
      },
      submitFormLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 换页
    handleSizeChange(val) {
      this.listQuery.page_size = val
      this.fetchData()
    },
    // 修改每页page_size
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },
    // 移除
    handleRemove() {
      this.$message({
        type: 'success',
        message: `移除成功`
      })
    },
    handleBack() {
      this.$router.push({ name: 'Role' })
    }
  }
}
</script>
